
<template>
  <div class="banner">
      <el-button type="success">+添加</el-button>
      <div>
          <el-table ref="multipleTable" :data="tableData" tooltip-effect="dark" style="width: 100%"
              @selection-change="handleSelectionChange">
              <el-table-column type="selection" width="120">
              </el-table-column>
              <el-table-column label="编号/类型">
                  <template slot-scope="scope">{{ scope.row.id }}</template>
              </el-table-column>
              <el-table-column prop="type" label="业务编号/链接地址" ailgn="center">
              </el-table-column>
              <el-table-column prop="title" label="名称" ailgn="center">
              </el-table-column>
              <el-table-column prop="picUrl" label="图片" ailgn="center">
                  <template slot-scope="scope">
                      <img :src="scope.row.picUrl" width="80px">
                  </template>
              </el-table-column>
              <el-table-column prop="statusStr" label="状态" ailgn="center">
                  <template slot-scope="scope">
                      <el-button size="small" type="success" round style="border-radius: 3px;"> {{ scope.statusStr
                          | fmtstatusStr }}</el-button>
                      <el-button v-if="scope.statusStr" size="small" type="warning" round> {{ scope.statusStr |
                          fmtstatusStr }}</el-button>
                  </template>
              </el-table-column>
              <el-table-column label="操作" ailgn="center">
                  <template slot-scope="scope">
                      <div>
                          <!-- {{ scope.row }} -->
                          <span @click="edit">编辑</span>
                          <span @click="del(scope.row)">删除</span>
                      </div>
                  </template>
              </el-table-column>
          </el-table>
      </div>
  </div>
</template>


<script>
import { ban } from '@/api/banner.js';
export default {
  data() {
      return {
          // parmas: { page: 1, pageSize: 5 },
          tableData: [{
              date: '2016-05-03',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
          }, {
              date: '2016-05-02',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
          }, {
              date: '2016-05-04',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
          }, {
              date: '2016-05-01',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
          }, {
              date: '2016-05-08',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
          }, {
              date: '2016-05-06',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
          }, {
              date: '2016-05-07',
              name: '王小虎',
              address: '上海市普陀区金沙江路 1518 弄'
          }],
      }
  },
  mounted() {
      this.getList()
  },
  methods: {
      async getList() {
          ban(this.parmas)
          let { data: res } = await ban(this.parmas)
          this.ban = res.result
          console.log(res);
          this.tableData = res.result
          this.total = res.totalRow
      },
      del(row) {
          console.log(row)
      },
      edit(row) {
          console.log(row);
      }, handleSizeChange(val) {
          this.pageSize = val
          this.currentPage = 1
      },
      handleSelectionChange(val) {
          this.multipleSelection = val;

      },

  },
  filters: {
      fmtstatusStr(val) {
          console.log(1);
          if (val) return "禁用"
          else return "启用"
      }
  }
}

</script>